<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{user.username}}</h2>
      <img v-bind:src="user.headimgUrl" alt="" />
      <img :src="user.headimgUrl" alt="" />
      <img src="user.headimgUrl" alt="" />

      <div :class="{test:true}"></div>
      <div :class="{test:flag}"></div>
      <div :class="arr"></div>

      <div :style="{color:'red'}">测试样式</div>
      <div :style="{color:color}">测试样式</div>
      <div :style="arr">测试样式</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            user: {
              username: "zhangsan",
              headimgUrl:
                "https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics5.baidu.com%2Ffeed%2F7c1ed21b0ef41bd5a3c6c531443a1bc13bdb3d43.jpeg%3Ftoken%3D460803feeb4a9a0c0cbdc40c2b00d1c1&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1657299600&t=884016fdceb0a584b9e283197c8e13dd",
            },
            flag: false,
            // 操作数组 数的元素实现类型添加删除
            arr: ["aa", "bb", { item: true, test: false }],
            color: "green",
            arr: [{ color: "red", fontSize: "20px" }, { color: "yellow" }],
          };
        },
        methods: {},
      });
    </script>
  </body>
</html>
